<template>
    <div id="cinemadetail">
        <van-nav-bar :title="cinDetailsTop.name" left-text="返回" left-arrow @click-left="onClickLeft">
        </van-nav-bar>
        <main>
           <div class="youhui" >
               <template v-for="item in cinDetailsTop.services" >
                   <span :key="item.name" v-if="item.name" >{{item.name}}</span>
               </template>
           </div>
           <div class="address">
               <van-icon name="location-o" />
               <div class="adrs">{{cinDetailsTop.address}}</div>
               <van-icon name="phone-o"/>
           </div>
            <van-swipe class="my-swipe" @change="onChange" :loop="false" indicator-color="white">
                <van-swipe-item v-for="item in CinemaData.films" :key="item.filmId">
                    <img :src="item.poster" alt="">
                </van-swipe-item>
            </van-swipe>
            <div class="film-info" >
                    <div class="mingcheng">
                        <span class="mingzi">{{name}}</span>
                        <i class="pingfen" style="color:#ffb232">{{grade}}</i>
                        <span class="fen">分</span>
                    </div>
                <div class="zhuyan">{{category}}|{{runtime}}分钟|导演: {{director}}  </div>
            </div>
            <van-tabs v-model="active" animated @click="onClick">
                <van-tab v-for="index in 3" :key="index" :title=" '' + index">
                    <div class="TimesBox" v-for="items in MovieRunTime" :key="items.endAt">
                        <div class="lefts">
                            <div class="startTime heights fons" >12:00</div>
                            <div class="endTime fontss">13:00</div>
                        </div>
                        <div class="centers">
                            <div class="luang heights fons">{{items.filmLanguage}}{{items.imagery}}</div>
                            <div class="hall fontss">{{items.hallName}}</div>
                        </div>
                        <div class="rights">
                            <div class="rmb float">￥{{ items.maxSalePrice|price}}</div>
                            <div class="buy " @click="pushBuy">购票</div>
                        </div>
                    </div>
                    <div class="empty" >
                        <div class="imgs">
                            <img src="@/assets/empty.png" alt="">
                        </div>
                        <div class="emtytitle">暂无场次</div>
                    </div>
                </van-tab>
            </van-tabs>
        </main>

    </div>
</template>

<script>
import {mapActions,mapState} from 'vuex'
import moment from "moment";
export default {
    data(){
        return{
            cinDetailsTop:[],
            mySwiper:null,
            grade:'',
            name:'',
            category:'',
            director:'',
            runtime:'',
            active:0,
            i:0,
            filmId:null,
            startTiem:null,
            endTime:null,
            and:null,
            
           
            
        }
    },
    components:{
        
    },
    computed:{
        ...mapState('cinema',['cinemaDetails','cinemaId','CinemaData','MovieRunTime']),

    },
    async created() {
            await this.getCinemaDetails(this.cinemaId)
            this.cinDetailsTop = this.cinemaDetails
            await  this.getDetailsList(this.cinemaId)  //传递参数给详情页
            this.bianli(this.i)
            await this.getMovieRouTime(this.filmId)
            this.Tiem()
    },
    updated(){
    },
    methods: {
        ...mapActions('cinema',['getCinemaDetails','getDetailsList','getMovieRouTime']),
        
        //返回按钮
        onClickLeft(){
            this.$router.back()
        },
        onChange(index) {
                this.bianli(index)
                this.getMovieRouTime(this.filmId)
                // console.log(this.cinemaId,this.filmId);
        },
        bianli(i){
                this.grade = this.CinemaData.films[i].grade,
                this.name = this.CinemaData.films[i].name
                this.category = this.CinemaData.films[i].category
                this.director= this.CinemaData.films[i].director
                this.runtime = this.CinemaData.films[i].runtime
                this.filmId = this.CinemaData.films[i].filmId
                this.startTiem = this.CinemaData.films[i].showAt
                this.endTime =  this.CinemaData.films[i].endAt
                // console.log(this.startTiem,this.endTime);
                
        },
        //处理时间
        Tiem(){
            this.and = this.endTime - this.startTiem
        },
        onClick(){ //滑动事件
            // this.getMovieRouTime()

        },
        //购票进入
        pushBuy(){ }
    },
    //过滤器
    filters:{
        price(value){
        return parseFloat(value / 100)
        },
        timeCine:function(value){
            return moment(value * 1000).format("YYYY-MM-DD");
        }
    },

};
</script>

<style scoped >
.empty{
    height: 1.333333rem;
    margin-top: .4rem;

}
.imgs{
    width: 1.333333rem;
    height: .933333rem;
    margin-left: 33.33%;
   
}
.imgs img{
    height: 100%;
    margin: 0 auto;
}
.emtytitle{
    height: .2rem;
    width: 2.666667rem;
    color: #bdc0c5;
    font-size: .16rem;
    margin-left: 30%;
    width: 1.333333rem;
    padding-left: .14rem;
}
.hall{
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap
}
.rmb{
    width: .133333rem;
    margin: .266667rem auto 0;
}
.buy{
    width: .5rem;
    border: .013333rem solid #ff5f16;
    height: .3rem;
    text-align: center;
    line-height: .3rem;
    font-size: .16rem;
    float: right;
    margin: .266667rem auto 0;
}
.float{
    float: left;
}
.fontss{
    font-size: .146667rem;
    color: #797d82;
}
.fons{
    font-size:.173333rem;
    color: #191a1b;
}
.heights{
    height: .466667rem;
    line-height: .466667rem;
}
.TimesBox{
    margin-left: .133333rem;
    display: flex;
    height: .8rem;

}
.lefts{
    width:.866667rem;
    
}
.centers{
    width:1.6rem;
}
.rights{
    width: 1rem;
    color: #ff5f16;
    font-size: .16rem;
   
}

.tabs-bar{
    height: .666667rem;
    background-color: #333;
    font-size: .186667rem;
}
.tabs-bar li{
    width: .933333rem;
    float: left;
    height: .666667rem;
    display: flex;
    justify-content: center;
    align-items: center;
}
.tabs-bar li span{
     width: .933333rem;
    height: .266667rem;
    font-size: .173333rem;
}
#cinemadetail {
  height: 100%;
  display: flex;
  flex-direction: column;
}

main{
    flex: 1;
    overflow: scroll;
}
.youhui{
    width:75%;
    color: #ffb232;
    font-size: .106667rem;
    display: flex;
    justify-content: space-between;
    margin: auto;
}
.youhui span{
    border: .013333rem solid #ffb232;

}
.address{
    width: 90%;
    display: flex;
    height: .333333rem;
    font-size: .16rem;
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
    align-items: center;

}
.adrs{
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    color:#191a1b
}
 
/* .swiper-container {
      height:2rem;
        background-color: #999;

    }
.swiper-slide  {
    margin-top: .266667rem;
    text-align: center;
    font-size: 18px;

    margin: auto;
    transition: 300ms;
	transform: scale(0.8);
}
.swiper-slide img{
    height: 100%;
   
}
.swiper-slide-active,.swiper-slide-duplicate-active{
      transform: scale(1);
      margin: auto;
	} */
.my-swipe .van-swipe-item {
    width: 100%;
    color: #fff;
    font-size: .266667rem;
    line-height: 2rem;
    text-align: center;
    height: 2rem; 
  }
  .van-swipe-item img{
      height: 100%;
      width: 50%;
  }
  .film-info{
      height: .666667rem;
     
  }
  .mingcheng{
      width: 1.8rem;
      height: 0.35rem;
      font-size: .186667rem;
      display: flex;
      margin: 0 auto;
  }
  .zhuyan{
        color:#797D80;
        width: 2.666667rem;
        height: .266667rem;
        font-size: .16rem;
        margin: 0 auto;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        text-align: center;
        
  }
  .mingzi{
      max-width: 1rem;
      font-size: .186667rem;
      display:inline-block;
        text-align: center;
      line-height:.266667rem ;
      color: #000;
      font-size: .16rem;
      height: .266667rem ;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap
  }
  .pingfen{
      display: inline-block;
      width: 0.5rem;
       text-align: center;
      line-height:.266667rem ;
  }
  .fen{
      width: 0.3rem;
      font-size: .15rem;
       color:#ffb232;
      display:inline-block;
       text-align: center;
      line-height:.266667rem ;

  }

</style>
